import React, { useEffect } from 'react'
import styles from './index.module.scss'
import { Button, message, Tag, Result } from 'antd'
import ExamDetail from '@/common_components/exam_detail'
import { useNavigate, useParams } from 'react-router-dom'
import { useAppDispatch, useAppSelector } from '@/store'
import { set_current_exam_topic_id, set_current_subject_two } from '@/store/slice/subject'
import { select_current_exam_topic_data, select_exam_topic_list } from '@/store/slice/subject/select'
import { get_student_exam_topic_list_async } from '@/store/slice/subject/request'

import { postStudentExam } from '@/util/request'
import { ExamTopicListDateType } from '@/util/interface'
import classNames from 'classnames'
import useRenderCount from '@/hooks/useRenderCount'

// 考试界面
export default function Exam() {
  const params = useParams()
  const dispatch = useAppDispatch()
  const navigate = useNavigate()

  // 考题列表
  const exam_topic_list = useAppSelector(select_exam_topic_list)
  // 现在选中的题目
  const current_topic = useAppSelector(select_current_exam_topic_data)
  // 获取路由跳转时该二级课程的id
  const subject_two_id = params.subject_two_id as string
  // 根据每个题目是否作答来判断是否可以提交
  const is_submit = exam_topic_list.every((item: ExamTopicListDateType) => {
    return item.answer
  })

  useRenderCount('exam')
  useEffect(() => {
    // 刷新页面后防止id消失
    dispatch(set_current_subject_two(subject_two_id))
    // 获取考题列表
    dispatch(get_student_exam_topic_list_async(subject_two_id))
  }, [subject_two_id])

  // 点击题目
  function clickTopic(item: ExamTopicListDateType) {
    // 设置当前选中的题目
    dispatch(set_current_exam_topic_id(item._id))
  }

  // 点击交卷
  async function submitExam() {
    const res = await postStudentExam({
      topic_list: exam_topic_list,
      two_id: subject_two_id
    })

    if (res.status === 201) {
      message.success('交卷成功')
      navigate('/exam_history')
      // 清除本地存储
      localStorage.removeItem('topic')
    }
  }

  // 离开考试页面
  function leaveExam() {
    localStorage.removeItem('topic')
    navigate('/exam_select')
  }

  return (
    <>
      {exam_topic_list.length > 0 ? (
        <div className={styles.wrap}>
          <div className={styles.list}>
            <div className={styles.title}>考题列表</div>
            <ul>
              {exam_topic_list.map((item: any, index: any) => {
                return (
                  <li style={{ cursor: 'pointer' }} className={classNames({ active: item._id === current_topic?._id })} key={item._id} onClick={() => clickTopic(item)}>
                    <span>
                      {index + 1}. {item.title} {item.answer ? <Tag color="green">已答题</Tag> : ''}
                    </span>
                  </li>
                )
              })}
            </ul>
          </div>
          <div className={styles.detail}>
            <ExamDetail type="exam"></ExamDetail>
            <Button disabled={!is_submit} type="primary" className={styles.submit} onClick={() => submitExam()}>
              点击交卷
            </Button>
            <Button onClick={() => leaveExam()} className={styles.leave} danger>
              离开
            </Button>
          </div>
        </div>
      ) : (
        <Result
          status="404"
          title="暂时没有题目"
          extra={
            <Button
              type="primary"
              key="console"
              onClick={() => {
                // 返回上一页将之前选择的二级课程给清除.要不然开始答题会报错
                dispatch(set_current_subject_two({}))
                navigate(-1)
              }}
            >
              返回上一页
            </Button>
          }
        />
      )}
    </>
  )
}
